<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Admin">
    <meta name="_xsrf" content="{{.xsrf_token}}"/>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script src="/static/js/jquery.base64.js"></script>
    <title>文章管理界面</title>

    <link rel="shortcut icon"
          href=""
          type="image/x-icon"/>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-"
          crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/layouts/btnstyle.css">


    <!--[if lte IE 8]>
    <link rel="stylesheet" href="/static/css/layouts/old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="/static/css/layouts/email.css">
    <!--<![endif]-->
</head>
<body>


<div id="layout" class="content pure-g">
    <div id="nav" class="pure-u">
        <a href="#" class="nav-menu-button">Menu</a>

        <div class="nav-inner">
            <button class="primary-button pure-button" id="allartical" onclick="window.location.href='/admin'">全部文章
            </button>
            <button class="primary-button pure-button" id="addarticle" onclick="window.location.href='/article/add'">
                新建文章
            </button>
            <div class="pure-menu">
                <ul class="pure-menu-list">
                    <li class="pure-menu-heading">分类</li>
                    {{range $key, $P_category := .Category}}
                        {{range $category := $P_category}}
                            <li class="pure-menu-item"><a id="{{$category}}" class="pure-menu-link"
                                                          onclick="category(this)">
                                    <span class="label-{{$category}}"></span>{{$category}}</a></li>
                        {{end}}
                    {{end}}
                </ul>
            </div>
        </div>
    </div>

    <div id="list" class="pure-u-1">

    </div>

    <div id="main" class="pure-u-1">
        <div class="content">
            <form id="P_form" method="post" action="/article/update">
                {{ .xsrfdata }}
                <div class="content-header pure-g">
                    <div class="pure-u-1-2">
                        <h3 class="content-title">标题：<input id="P_title" name="Title" type="text"
                                                            value=""></h3>
                        文章分类：<input id="P_category" name="Category" type="text" value="">
                        <p class="content-subtitle">
                            From <a id="P_author"></a> at <span id="P_addtime"></span>
                        </p>
                    </div>
                    <div class="content-controls pure-u-1-2">
                        <button class="secondary-button pure-button" id="but_save" onclick="updatepost()">保存修改</button>
                        <button class="secondary-button pure-button" id="but_del" onclick="delpost()">删除</button>
                        <button form="" class="secondary-button pure-button" id="but_view" onclick="">浏览文章</button>
                        <div class="switch-box is-primary">
                            <input id="articleid" name="Id" type="hidden" value=""/>
                            <input id="primary" name="Top" class="switch-box-input" type="checkbox" checked/>
                            <input id="content" name="Content" type="hidden" value=""/>
                            <input id="morecontent" name="Morecontent" type="hidden" value=""/>
                            <input id="articleurl" name="ArticleUrl" type="hidden" value=""/>
                            <label for="primary" class="switch-box-slider"></label>
                            <label for="primary" class="switch-box-label">置顶</label>
                        </div>
                    </div>
                </div>
            </form>
            <div id="editor" class="content-body"></div>
        </div>
    </div>
</div>

<script type="text/javascript" src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>

<script type="application/javascript">
    var E = window.wangEditor;
    var editor = new E('#editor');
    editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
    editor.customConfig.pasteFilterStyle = false;
    editor.create();
    var idcache = "-1";
    var btop = true;
    var json_all;
    var P_list = '        <div class="item {4} pure-g" id="{5}" onclick="listclick(this)">\n' +
        '            <div class="pure-u">\n' +
        '                <img width="64" height="64" alt="{0}&#x27;s avatar" class="avatar"\n' +
        '                     src="static/img/common/{6}.png">\n' +
        '            </div>\n' +
        '\n' +
        '            <div class="pure-u-3-4">\n' +
        '                <h5 class="name">{1}</h5>\n' +
        '                <h4 class="subject">{2}</h4>\n' +
        '                <p class="desc">\n' +
        '                    {3}\n' +
        '                </p>\n' +
        '            </div>\n' +
        '        </div>';

    String.prototype.format = function () {
        var resultStr = this.toString();
        // 参数为对象
        if (typeof arguments[0] === "object") {
            for (var i in arguments[0]) {
                resultStr = resultStr.replace("{" + i + "}", arguments[0][i]);
            }
        }
        // 多个参数
        else {
            for (var i = 0; i < arguments.length; i++) {
                resultStr = resultStr.replace("{" + i + "}", arguments[i]);
            }
        }
        return resultStr;
    };

    function listclick(cdiv) {
        if (idcache !== "-1") {
            if (btop === true) {
                document.getElementById(idcache).className = "item item-unread pure-g";
            } else {
                document.getElementById(idcache).className = "item pure-g";
            }
            btop = cdiv.className.indexOf("item-unread") !== -1;
            idcache = cdiv.id;
            cdiv.className = "item item-selected pure-g";
        } else {
            idcache = cdiv.id;
            btop = cdiv.className.indexOf("item-unread") !== -1;
            cdiv.className = "item item-selected pure-g";
        }
        $.ajax({
            type: "POST",
            url: "/article/" + cdiv.id,
            dataType: "json",
            data: "_xsrf=" + $('input[name="_xsrf"]').val(),
            success: function (jsonStr) {
                if (jsonStr !== null) {
                    for (var i = 0; i < jsonStr.length; i++) {
                        if (jsonStr[i][0].toString() === cdiv.id.toString()) {
                            $("#articleid").val(jsonStr[i][0]);
                            $("#P_title").val(jsonStr[i][3]);
                            $("#P_category").val(jsonStr[i][6]);
                            $("#P_author").text(jsonStr[i][1]);
                            $("#articleurl").val("/article/" + jsonStr[i][0]);
                            $("#but_view").attr("onclick", "window.location.href=" + "'/article/" + jsonStr[i][0] + "'");
                            var time = jsonStr[i][7];
                            var d = new Date(time);
                            var times = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                            $("#P_addtime").text(times);
                            editor.txt.html(jsonStr[i][4]);
                        }
                    }
                }
            }
        });
    }

    function updatepost() {
        var content = editor.txt.html();
        var morecontent = editor.txt.text().substr(0, 100);
        $("#content").val(content);
        $("#morecontent").val(morecontent);
        return true;
    }

    function delpost() {
        $("#P_form").attr('action', "/article/delete");
        $("#P_form").submit();
        return true;
    }

    function category(a) {
        idcache = "-1";
        $("#list").html("");
        var category = a.id;
        if (json_all !== null) {
            for (var i = 0; i < json_all.length; i++) {
                if (json_all[i][5] === category) {
                    if (json_all[i][2] === false) {
                        var zhuwx = P_list.format(json_all[i][1], json_all[i][1], json_all[i][3], json_all[i][4], "", json_all[i][0], json_all[i][1]);
                    } else {
                        var zhuwx = P_list.format(json_all[i][1], json_all[i][1], json_all[i][3], json_all[i][4], "item-unread", json_all[i][0], json_all[i][1]);
                    }
                    $("#list").append(zhuwx);
                }
            }
        }
    }

    $.ajax({
        type: "POST",
        url: "/article/all",
        dataType: "json",
        data: "_xsrf=" + $('input[name="_xsrf"]').val(),
        success: function (jsonStr) {
            json_all = null;
            json_all = jsonStr;
            if (jsonStr !== null) {
                for (var i = 0; i < jsonStr.length; i++) {
                    if (jsonStr[i][2] === false) {
                        var zhuwx = P_list.format(jsonStr[i][1], jsonStr[i][1], jsonStr[i][3], jsonStr[i][4], "", jsonStr[i][0], jsonStr[i][1]);
                    } else {
                        var zhuwx = P_list.format(jsonStr[i][1], jsonStr[i][1], jsonStr[i][3], jsonStr[i][4], "item-unread", jsonStr[i][0], jsonStr[i][1]);
                    }
                    $("#list").append(zhuwx);
                }
            }
        }
    });
</script>

</body>
</html>
